<template>
    <div class="Login">
        <PageHeader
            :title="$route.meta.title"
            :needLeft="true"
            :needRight="true"
            rightText="注册"
            @headerRightClick="toRegister"
        />
        <div class="Login-country">
            <p>国家和地区</p>
            <div class="Login-country-china">
                <p>中国</p>
                <p><img src="../assets/img/PersonalCenterimg/ic_change.png" alt=""></p>
            </div>
        </div>
        <div class="Login-phone">
            <van-form @submit="onSubmit">
                <div class="Login-phone-username">
                    <van-field
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
        <div class="Login-forget">
            <p><van-checkbox v-model="checked">自动登录</van-checkbox></p>
            <p>短信验证码登录</p>
            <p>忘记密码</p>
        </div>
        <div class="Login-share">
            <div class="Login-share-img">
                <ul>
                    <li><a href="/"></a></li>
                    <li><a href="/"></a></li>
                    <li><a href="/"></a></li>
                    <li><a href="/"></a></li>
                </ul>
            </div>
            <p>登录代表你已同意<span>用户协议</span>和<span>隐私政策</span></p>
        </div>
        <div class="danger-msg notice-box" v-if="loginWrong">用户名或密码错误</div>
        <div class="congratulation-msg notice-box" v-if="loginCongratulation">登录成功</div>
    </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import { createNamespacedHelpers } from 'vuex'

const user = createNamespacedHelpers('user')
const cart = createNamespacedHelpers('cart')
export default {
    name: 'login',
    data () {
        return {
            username: '',
            password: '',
            checked: true,
            loginWrong: false,
            loginCongratulation: false
        }
    },
    methods: {
        ...user.mapActions(['loginAsync']),
        ...user.mapMutations(['setUser']),
        ...cart.mapMutations(['setCart']),
        onSubmit (values) {
            // console.log('submit', values)
            this.loginAsync(values)
                .then(resp => {
                    console.log(resp)
                    if (resp.code === 200) {
                        this.loginCongratulation = true
                        this.setUser(resp.data)
                        this.setCart(resp.cartList)
                        setTimeout(() => {
                            this.loginCongratulation = false
                            this.$router.push('/user')
                        }, 2000)
                    } else {
                        this.loginWrong = true
                        setTimeout(() => {
                            this.loginWrong = false
                        }, 2000)
                    }
                })
        },
        toRegister () {
            this.$router.push('/register')
        }
    },
    components: {
        PageHeader
    }
}
</script>

<style lang="scss">
.Login {
    width: 100%;
    height: 100%;
    background: #f5f5f5f5;
    padding: 15px 12px 1px 10px;
    box-sizing: border-box;
    background: url(../assets/img/PersonalCenterimg/background.jpg);
    position: relative;
    .Login-country{
        width: 100%;
        height: 45px;
        margin-bottom: 14px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
        p{
        font-size: 15px;
        color: #666;
        }
        .Login-country-china {
            width: 50px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            & p:nth-last-child(1) {
                width: 12px;
                height: 12px;
                img {
                    width: 12px;
                    height: 12px;
                }
            }
        }
    }
    .Login-phone {
        width: 100%;
        min-height: 91px;
        // background: #fff;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
        .Login-phone-username {
            box-shadow: 0 3px 5px -4px rgba(0,0,0,.4) inset, -1px 0 3px -2px rgba(0,0,0,.1) inset;
            border-radius: 12px;
            overflow: hidden;
        }
    }
    .Login-forget {
        width: 100%;
        height: 27px;
        margin-bottom: 200px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #7f7f7f;
        font-size: 14px;
    }
    .van-checkbox__label {
        color: #7f7f7f;
        font-size: 14px;
    }
    .Login-share {
        position: absolute;
        left: 0;
        bottom: 8px;
        width: 100%;
        height: 71px;
        // border: 1px solid Red;
        .Login-share-img {
            width: 100%;
            height: 40px;
            ul {
                width: 251px;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                li{
                    width: 40px;
                    height: 40px;
                }
                & li:nth-child(1) {
                    background: url(../assets/img/PersonalCenterimg/douyin.png) no-repeat 100% 100%;
                    background-size: 100%;
                }
                & li:nth-child(2) {
                    background: url(../assets/img/PersonalCenterimg/toutiao.png) no-repeat 100% 100%;
                    background-size: 100%;
                }
                & li:nth-child(3) {
                    background: url(../assets/img/PersonalCenterimg/qq.png) no-repeat;
                    background-size: 100%;
                }
                & li:nth-child(4) {
                    background: url(../assets/img/PersonalCenterimg/weibo.png) no-repeat;
                    background-size: 100%;
                }
            }
        }
        p {
            // width: 275px;
            // height: 30px;
            // margin: 0 auto;
            font-size: 14px;
            color: #7f7f7f;
            line-height: 14px;
            margin-top: 15px;
            text-align: center;
            span {
                color: #5079d9;
                margin: 0 4px;
            }
        }
    }
    .notice-box {
        position: absolute;
        top: 400px;
        left: calc(50% - 150px);
        width: 300px;
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 8px;
        font-weight: bold;
        &.danger-msg {
            color: #f00;
        }
        &.congratulation-msg {
            color: lawngreen;
        }
    }
}
</style>
